import React,{Component} from "react";
import { Icon } from 'antd';
import '../assets/stylesheets/selects.css'
//可以不写这个组件，之后有空可以想想怎么做

export default class Myselect extends Component{
    constructor(props){
        super(props);
        this.state={
            display:"none",
            // type:this.props.value?this.props.value:this.props.initalValue?this.props.initalValue:"0",
            values:this.props.values?this.props.values:{"0":"成人","1":"儿童","2":"婴儿"},
        }
    }
    componentDidMount(){
        let _this = this;
        window.addEventListener("click",function(){
            _this.setState({display:"none"});
        })
    }
    selectClick = (e) =>{
        this.state.display === "none"?this.setState({display:"block"}):this.setState({display: "none"});
        e.stopPropagation();
        e.preventDefault();
    }
    selectOptionClick = (e) =>{
        if(e.target.children.length === 0){//改变一个选项
            let next = e.target.nextElementSibling,
                pre = e.target.previousElementSibling;
            //设置选中的
            e.target.setAttribute("data-selected", "true");
            for(; next; next = next.nextElementSibling){
                if(next.getAttribute("data-selected") === "true"){
                    next.setAttribute("data-selected",'false');
                    break;
                }
            }
            for(; pre; pre = pre.previousElementSibling){
                if(pre.getAttribute("data-selected") === "true"){
                    pre.setAttribute("data-selected","false");
                    break;
                }
            }
            this.setState({type: e.target.getAttribute("data-value")});
            //给父组件传值
            if(this.props.onChange){
                this.props.onChange(this.props, e.target.getAttribute("data-value"), e.target.innerText);
            }
            this.setState({display:"none"});
        }
    }
    render(){
        //选中的值。每次外面变化的时候需要实时更新。
        let type = this.props.value?this.props.value:this.props.initalValue?this.props.initalValue:"0";
        return (
            <div className="selects-people-type" onClick={this.selectClick}><span>
                    {(()=>{
                        let inflage = false;
                        for(let item in this.state.values){
                            if(type === item){
                                inflage = true;
                                return this.state.values[item];
                            }
                        }
                        if(!inflage){ return "null"; }
                    })()}</span><Icon type="down" className="down" />
                <div className="select" style={{display:this.state.display}} onClick={this.selectOptionClick}>
                    {
                        (()=>{
                            let values = this.state.values, 
                                i = 0, 
                                arr=[];
                            for(let item in values){
                                arr.push(<div className="select-option" data-value={item} data-selected=
                                    {(()=>{//如果有值就是选中的，否则是默认的，否则第一个为选中
                                        if(this.props.value){
                                            if(item === this.props.value){ return true; }
                                        }else if(this.props.initalValue){
                                            if(item === this.props.initalValue){ return true; }
                                        }else{
                                            if(i === 0){ return true; }
                                        }
                                    })()}
                                >{values[item]}</div>);
                                i++;
                            }
                            return arr;
                        })()
                    }
                </div>
            </div>
        );
    }
}
